<!--
 * @Description: 视频打分弹窗
 * @Author: liyujie
 * @Date: 2021/3/15
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/3/15
-->
<template>
    <section class="wrapper video-scoring-dialog">
        <el-dialog
            title="视频打分"
            width="858px"
            :visible.sync="dialogVisible"
            @close="handleDialogClose"
        >
            <el-table
                :data="tableData"
                height="470"
                ref="table"
                class="data-list"
                :header-cell-style="{height: '44px',background:'#f2f2f2',color:'#333',fontWeight: 500}"
                @selection-change="handleSelectedChange"
            >
                <el-table-column
                    align="center"
                    width="80"
                    type="selection"
                />
                <el-table-column
                    label="视频信息"
                    align="left"
                    width="210"
                >
                    <template slot-scope="scope">
                        <div class="video-info">
                            <img
                                :src="scope.row.video_cover"
                                @click="previewVideo(scope.row.video_url)"
                            >
                            <div class="video-name">{{ scope.row.video_name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="true_name"
                    label="评分"
                    align="left"
                >
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.score">
                            <el-radio
                                v-for="item in scoreList"
                                :key="item.value"
                                :label="item.value"
                            >
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="table-footer">
                <div class="options">
                    <el-checkbox
                        v-model="checkAllStatus"
                        :indeterminate="checkIndeterminate"
                        @change="handleSelectedAll"
                    >
                        全选
                    </el-checkbox>
                </div>
                <div class="radio-wrap">
                    <el-radio-group
                        v-model="score"
                        @change="handleScoreChange"
                    >
                        <el-radio
                            v-for="item in scoreList"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.label }}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="btn">
                <el-button
                    size="medium"
                    style="width: 120px;margin-right: 32px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    style="width: 120px"
                    :loading="buttonLoading"
                    @click="handleSubmit"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video_url"
            :top="54"
            :left="left"
        />
    </section>
</template>

<script>
import {deepClone} from "@/assets/js/utils";
import VideoSimple from "./video-simple";

export default {
    name: 'VideoScoringDialog',
    components: {VideoSimple},
    data() {
        return {
            dialogVisible: false,
            tableData: [],
            buttonLoading: false,
            checkAllStatus: false,
            checkIndeterminate: false,
            multipleSelection: [],
            score: '',
            scoreList: [
                { label: '低于预期(1)', value: 1 },
                { label: '符合预期(2)', value: 2 },
                { label: '超出预期(3)', value: 3 },
                { label: '远超预期(5)', value: 5 },
            ],
            video_url: '',
            left: 0,
        };
    },
    mounted() {
    },
    methods: {
        /**
         * 显示弹窗
         */
        show(data) {
            let videos = deepClone(data);

            videos.forEach((item, index) => {
                item.score = 2;
            });
            this.tableData = videos;
            this.dialogVisible = true;
        },
        /**
         * 关闭弹窗
         */
        close() {
            this.dialogVisible = false;
            this.buttonLoading = false;
            this.score = '';
        },

        /**
         * 提交
         */
        handleSubmit() {
            let audit_list = this.tableData.map(item => {
                return {
                    video_no: item.video_no,
                    score : item.score
                };
            });
            let params = {
                audit_list: JSON.stringify(audit_list),
                type: 2
            };

            this.buttonLoading = true;
            this.$post('/student/room_series_video%5Cstudent_audit_batch', params, res => {
                if (res.code === 1) {
                    this.buttonLoading = false;
                    this.dialogVisible = false;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success'
                    });
                    this.$emit('update');
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.buttonLoading = false;
            });
        },

        /**
         * 点击全选
         * @param val
         */
        handleSelectedAll(val) {
            this.multipleSelection = val ? this.tableData : [];
            this.$refs.table.toggleAllSelection();
            this.checkIndeterminate = false;
        },

        /**
         * 选中视频
         * @param value
         */
        handleSelectedChange(value) {
            let checkedCount = value.length;

            this.multipleSelection = value;
            this.checkAllStatus = checkedCount === this.tableData.length;
            this.checkIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
        },

        /**
         * 选中项评分
         * @param val
         */
        handleScoreChange(val) {
            this.tableData.forEach((item, index) => {
                this.multipleSelection.forEach(sItem => {
                    if(sItem.video_no === item.video_no) {
                        item.score = val;
                        this.$set(this.tableData, index, item);
                    }
                });
            });
        },

        /**
         * 弹窗关闭
         */
        handleDialogClose() {
            this.buttonLoading = false;
            this.score = '';
        },

        /**
         * 查看视频
         * @param url
         */
        previewVideo(url) {
            this.video_url = url;
            this.left = document.body.clientWidth - 400;
            this.$refs.videoSimple.showVideo();
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog__body {
        padding: 32px;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {

    }
    .btn {
        text-align: center;
        margin-top: 36px;
    }
    .data-list {
        background: #FBFBFB;
        border-radius: 4px 4px 0 0;
        border: 1px solid #EEEEEE;
        border-bottom: 0;
        ::-webkit-scrollbar {
            width: 6px;
        }
    }
    /deep/ .el-table::before {
        height: 0;
        .el-table__row {
            background: #FBFBFB;
        }
    }
    .table-footer {
        height: 56px;
        background: #FBFBFB;
        border-radius: 0 0 4px 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #EEEEEE;
        padding: 0 20px 0 24px;
        .options {
            margin-left: 10px;
        }
    }
    /deep/ .el-radio__label {
        padding-left: 4px;
    }
    .video-info {
        display: flex;
        align-items: center;
        img {
            width: 64px;
            height: 64px;
            margin-right: 12px;
            cursor: pointer;
        }
        .video-name {
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
        }
    }
}
</style>
<style lang="less">
.wrapper.video-scoring-dialog {
    .el-table {
        th {
            background: #f2f2f2!important;
        }
        td {
            background: #FBFBFB;
        }
    }
}
</style>
